<style scoped>
	.layout {
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-logo {
  width: 130px;
  height: 40px;
  background: #ffffff;
  border-radius: 3px;
  top: 6px;
  left: -21px;
  margin-left: 50px;
}
</style>
<template>
	<div class="layout">
		<Layout :style="this.heightStyle">
			<Header :style="{ height: '55px', padding: '0' }">
				<Menu mode="horizontal" :theme="this.menuTheme" active-name="1" :style="{height:'55px',lineHeight:'55px'}"
				 @on-select="clickMenu">
					<div class="layout-logo">
						<img src="../assets/hongse.jpg" alt="logo" :style="{display:'block',width:'130px',height:'40px'}" />>
					</div>
					<div class="layout-nav">
						<Submenu name="other" style="float:right;">
							<template slot="title">
								<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" :style="{marginRight:'5px'}" />
								{{this.loginUser.chsName || "个人信息"}}
							</template>
							<MenuItem name="loginout" style="text-align:center">退出登录</MenuItem>
						</Submenu>
					</div>
				</Menu>
			</Header>
			<Layout>
				<Sider hide-trigger :style="siderClass">
					<Menu :active-name="this.viewComponent" :theme="this.menuTheme" width="auto" :open-names="['1']" @on-select="swichMain">
						<Submenu name="1">
							<template slot="title">
								<Icon type="ios-navigate"></Icon>任务管理
							</template>

							<MenuItem name="1-1">全量任务列表</MenuItem>
							<MenuItem name="1-2">增量任务列表</MenuItem>
							<MenuItem name="1-3">数据库列表</MenuItem>
							<MenuItem name="1-4">批次列表</MenuItem>
							<MenuItem name="1-5" >数据分析</MenuItem>

						</Submenu>

						<Submenu name="2" v-if="loginUser.userType === 1">
							<template slot="title">
								<Icon type="ios-analytics"></Icon>系统管理
							</template>
							<MenuItem name="2-1">用户管理</MenuItem>
							<MenuItem name="2-2">IM管理</MenuItem>
						</Submenu>
						<!-- <Submenu name="4" v-if="loginUser.userType === 1 ">
							<template slot="title">
								<Icon type="ios-navigate"></Icon>数据分析
							</template>
							<MenuItem name="4-1" >数据分析</MenuItem>
						</Submenu> -->
					</Menu>
					<i-Switch :style="{position: 'absolute',bottom: '20px',left: '70px'}" true-color="#515a6e" false-color="#2d8cf0"
					 @on-change="swichTheme" v-model="swichModel">
						<span slot="open">暗</span>
						<span slot="close">亮</span>
					</i-Switch>
				</Sider>
				<Layout :style="{padding: '10px'}">
					<Content ref="contents" :style="{padding: '10px', minHeight: '280px', background: '#fff'}">

						<EtlMainTaskList v-if="this.viewComponent==='1-1'" :menuTheme="this.menuTheme" :windowHeight="this.windowHeight"></EtlMainTaskList>
						<EtlIncrementTask v-if="this.viewComponent==='1-2'" :menuTheme="this.menuTheme" :windowHeight="this.windowHeight"></EtlIncrementTask>
						<EtlDbInfoList v-if="this.viewComponent==='1-3'" :menuTheme="this.menuTheme" :windowHeight="this.windowHeight"></EtlDbInfoList>
						<EtlBatchList v-if="this.viewComponent==='1-4'" :menuTheme="this.menuTheme" :windowHeight="this.windowHeight"></EtlBatchList>
						<StatisticsIndex v-if="this.viewComponent==='1-5'" :menuTheme="this.menuTheme" :windowHeight="this.windowHeight"></StatisticsIndex>
						

						<UserIndex v-if="this.viewComponent==='2-1'" :menuTheme="this.menuTheme" :windowHeight="this.windowHeight"></UserIndex>
						<ImIndex v-if="this.viewComponent==='2-2'" :menuTheme="this.menuTheme" :windowHeight="this.windowHeight"></ImIndex>

					</Content>
				</Layout>
			</Layout>
		</Layout>
	</div>
</template>
<script>
	import storage from "../common/storage";
	import EtlMainTaskList from "./etlTask/list";
	import EtlAdd from "./etlTask/add";
	import EtlDbInfoList from "./dbInfo/list";
	import EtlBatchList from "./batch/list";
	import myMenu from "./menu/index";
	import UserIndex from "./user/list";
	import ImIndex from "./im/index";
	import StatisticsIndex from "./statistics/index";
	import EtlIncrementTask from "./etlIncrementTask/list";

	export default {
		name: "Index",
		components: {
			EtlMainTaskList,
			EtlAdd,
			EtlDbInfoList,
			EtlBatchList,
			myMenu,
			UserIndex,
			ImIndex,
			StatisticsIndex,
			EtlIncrementTask,
		},
		data() {
			return {
				siderClass: {
					backgroundColor: "#515a6e"
				},
				viewComponent: "1-1",
				menuTheme: "dark",
				swichModel: false,
				heightStyle: "",
				windowHeight: window.innerHeight,
				loginUser: {},
			};
		},
		mounted() {
			this.getUserInfo();
			this.swichModel = storage.get("themes");
			this.swichTheme(storage.get("themes")); //根据用户选择更改主题
			//自适应窗体大小调整
			this.windowHeight = window.innerHeight < 700 ? 700 : window.innerHeight;
			this.heightStyle = {
				height: this.windowHeight - 2 + "px"
			};
			window.onresize = () => {
				if (window.innerHeight > 700) {
					this.heightStyle = {
						height: window.innerHeight - 2 + "px"
					};
					this.windowHeight = window.innerHeight;
				}
			};
		},
		methods: {
			//获取权限菜单数据
			async getUserInfo() {
				const userResult = await this.$api.getUserInfo();
				if (userResult.code === 1) {
					this.loginUser = userResult.data;
					this.$loginUser.userInfo = userResult.data
					if (this.loginUser) {
						let actions = {
							userName: this.loginUser.chsName,
							type: 'onlineUsers'
						};
						this.$sockets.websock.socket.send(JSON.stringify(actions));
					}
				}
			},
			swichMain(name) {
				this.viewComponent = name;
			},
			swichTheme(status) {
				if (status) {
					this.menuTheme = "light";
					this.siderClass.backgroundColor = "#ffffff";
				} else {
					this.menuTheme = "dark";
					this.siderClass.backgroundColor = "#515a6e";
				}
				storage.set("themes", status);
			},
			//退出登录
			async clickMenu(menuName) {
				if (menuName === "loginout") {
					console.log("退出登录");
					// window.location.href = this.$tool.getLoginAndLoginOutUrl(1);
					this.loading = true;
					const result = await this.$api.loginOut();
					this.loading = false;
					if (result.code === 1) {
						window.location.href = "/login";
					}else{
						this.$Message.error(result.errMsg);
					}

				}
			}
		}
	};
</script>
